<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        项目开发中的一中特殊情况:
            1、页面存在大量 *展示数据* ，页面需要基于数据变化进行页面更新；
            2、但数据更新频率和次数并不对，希望能够尽可能的优化程序资源；
        
        插值表达式和指令【模板语法】的取值，需要是当前容器对应的vue实例的根属性数据；
        </pre>
        <p>$msg:{{ $msg }}</p>
        <ul>
            <li v-for="item in $list">{{ item }}</li>
        </ul>
        <input type="button" value="（加载|更新）数据" @click="loadList()">
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                loadList() {
                    this.$msg = "测试数据";
                    this.$list = [1,2,3,4,5,6]
                    this.$forceUpdate();
                }
            },
        }).mount("#app")
    </script>
</body>
</html>